<style lang="scss" src="./index.scss" scoped></style>
<template>
    <main class="form-main">
        <section class="form-drag-box">
            <drag-tag-list
                v-if="formType !== 'query'"
                class="form-main__aside"
                @item-click="handleItemClick"
            ></drag-tag-list>
            <div class="form-main__body">
                <validation-observer ref="observerRef">
                    <el-form
                        class="custom-form"
                        label-position="top"
                        :class="{ 'is-disabled': formType === 'query' }"
                        :disabled="formType === 'query'"
                        label-width="120px"
                        ref="formRef"
                    >
                        <validation-provider
                            name="model.name"
                            :rules="'required'"
                            :customMessages="{ required: '请输入表格标题' }"
                            v-slot="{ errors }"
                            slim
                        >
                            <el-form-item label="表格标题" required>
                                <div
                                    class="cf__group"
                                    :class="{ error: errors.length > 0 }"
                                >
                                    <div class="cf__group-info">
                                        <el-input
                                            v-model="model.name"
                                            name="model.name"
                                            placeholder="请输入表格标题"
                                            maxlength="100"
                                            auto-complete="off"
                                        >
                                        </el-input>
                                    </div>
                                    <div class="cf__group-tips">
                                        <template v-if="errors.length > 0">
                                            {{ errors[0] }}
                                        </template>
                                        <template v-else>
                                            表格标题长度不能超过100个字
                                        </template>
                                    </div>
                                </div>
                            </el-form-item>
                        </validation-provider>
                        <validation-provider
                            name="model.desc"
                            :rules="''"
                            :customMessages="{ required: '请输入表格描述' }"
                            v-slot="{ errors }"
                            slim
                        >
                            <el-form-item label="表格描述">
                                <div
                                    class="cf__group"
                                    :class="{ error: errors.length > 0 }"
                                >
                                    <div class="cf__group-info">
                                        <el-input
                                            v-model="model.desc"
                                            name="model.desc"
                                            placeholder="请输入表格描述"
                                            maxlength="250"
                                            auto-complete="off"
                                            type="textarea"
                                            show-word-limit
                                            rows="4"
                                        >
                                        </el-input>
                                    </div>
                                    <div class="cf__group-tips">
                                        <template v-if="errors.length > 0">
                                            {{ errors[0] }}
                                        </template>
                                        <template v-else>
                                            表格描述长度不能超过250个字
                                        </template>
                                    </div>
                                </div>
                            </el-form-item>
                        </validation-provider>
                        <el-form :disabled="false">
                            <preview-list
                                :data="model.list"
                                :model="model"
                                previewModel="all"
                                preview-type="table"
                            >
                            </preview-list>
                        </el-form>
                        <!-- 自定义表单内容 -->
                        <drag-tag-form
                            :list.sync="model.list"
                            ref="dragTagFormRef"
                        ></drag-tag-form>
                        <!-- <el-form-item label="关联分类" class="position-left">
                            <div class="cf__group">
                                <div class="cf__group-info">
                                    <tree-cascader
                                        title="关联分类"
                                        v-model="model.tagValue"
                                        filterable
                                        :options="tagList">
                                        <el-button plain>点击关联分类</el-button>
                                    </tree-cascader>
                                </div>
                                <div class="cf__group-tips"></div>
                            </div>
                        </el-form-item> -->
                        <el-form-item label="关联部门" class="position-left" v-if="!_isOperation && !_isTownPage">
                            <div class="cf__group">
                                <div class="cf__group-info">
                                    <!-- 关联部门 -->
                                    <tree-cascader
                                        title="关联部门"
                                        v-model="model.departmentValue"
                                        :disabled="formType === 'query'"
                                        filterable
                                        :checkStrictly="true"
                                        :options="departmentList">
                                        <el-button plain>点击关联部门</el-button>
                                    </tree-cascader>
                                </div>
                                <div class="cf__group-tips"></div>
                            </div>
                        </el-form-item>
                        <!-- <el-form :disabled="false" v-if="_isTownPage">
                            <validation-provider
                                name="model.taskTime"
                                :rules="'required'"
                                :customMessages="{ required: '请选择发送时间' }"
                                v-slot="{ errors }"
                                slim
                            >
                                <el-form-item label="发送时间" required>
                                    <div
                                        class="cf__group"
                                        :class="{ error: errors.length > 0 }"
                                    >
                                        <div class="cf__group-info">
                                            <el-date-picker
                                                v-model="model.taskTime"
                                                name="model.taskTime"
                                                type="daterange"
                                                :picker-options="pickerOptions"
                                                value-format="yyyy-MM-dd"
                                                range-separator="至"
                                                start-placeholder="开始日期时间"
                                                end-placeholder="截止日期时间">
                                            </el-date-picker>
                                        </div>
                                        <div class="cf__group-tips">
                                            <template v-if="errors.length > 0">
                                                {{ errors[0] }}
                                            </template>
                                        </div>
                                    </div>
                                </el-form-item>
                            </validation-provider>
                        </el-form> -->
                    </el-form>
                </validation-observer>
                <footer class="form-main__body-footer">
                    <slot></slot>
                </footer>
            </div>
        </section>
    </main>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from "vue-property-decorator";
import FormMixin from "@/mixins/form.mixin.ts";
import DragTagList from "../../../components/drag-tag-list/index.vue";
import DragTagForm from "../../../components/drag-tag-form/index.vue";
import SendRange from "../../../components/send-range/index.vue";
import PreviewList from "../../../components/preview/index.vue";
import TreeCascader from "../../../components/tree-cascader/index.vue";
// const mock = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

@Component({
    name: "ModuleManageFormNotAlive",
    components: {
        DragTagList,
        DragTagForm,
        TreeCascader,
        SendRange,
        PreviewList
    }
})
export default class ModuleManageForm extends Mixins(FormMixin) {
    @Prop({
        type: Object,
        default: () => {
            return {};
        }
    })
    readonly model!: any;

    @Prop({
        type: Object,
        default: () => {
            return {};
        }
    })
    readonly userLevel!: any;

    // @Prop({
    //     type: Array,
    //     default: () => {
    //         return [];
    //     }
    // })
    // readonly tagList!: any[];

    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly departmentList!: any[];

    @Prop({
        type: String,
        default: ""
    })
    readonly formType!: string;

    get _isOperation() {
        return ['ADMIN', 'OPERATION_ADMIN', 'OPERATION'].includes(this.userLevel.name);
    }

    get _isTownPage() {
        return this.$route.name === "TownModuleManageForm";
    }

    pickerOptions = {
        disabledDate(time: any) {
            const onDay = 1000 * 60 * 60 * 24;
            return time.getTime() < (Date.now() - onDay);
        },
        shortcuts: [{
            text: '一周内',
            onClick(picker: any) {
                const end = new Date();
                const start = new Date();
                end.setDate(end.getDate() + 6);
                picker.$emit('pick', [start, end]);
            }
        }, {
            text: '一个月内',
            onClick(picker: any) {
                const end = new Date();
                const start = new Date();
                end.setMonth(end.getMonth() + 1);
                picker.$emit('pick', [start, end]);
            }
        }, {
            text: '三个月内',
            onClick(picker: any) {
                const end = new Date();
                const start = new Date();
                end.setMonth(end.getMonth() + 3);
                picker.$emit('pick', [start, end]);
            }
        }]
    };

    handleRelationSelectChange(item: any, type: string) {
        let key = "";
        if (type === "tag") {
            key = "tagValue";
        } else {
            key = "departmentValue";
        }
        const _index = this.model[key].findIndex(
            (cur: any) => cur === item.value
        );
        if (_index === -1) {
            this.model[key].push(item.value);
        } else {
            this.model[key].splice(_index, 1);
        }
    }

    async submit() {
        const res = {
            result: true,
            msg: ""
        };
        const observerRef: any = this.$refs.observerRef;
        const validateResult: any = await observerRef.validate();
        if (validateResult && this.model.list.length === 0) {
            res.result = false;
            res.msg = "表格配置不能为空！";
            return res;
        }
        const dragTagFormRef: any = this.$refs.dragTagFormRef;
        const dragTagFormRefValidate: any = dragTagFormRef.submit();

        res.result = validateResult && dragTagFormRefValidate.result;
        res.msg = dragTagFormRefValidate.msg || "请确保表单数据有效！";
        return res;
    }

    handleItemClick(item: any, type: string) {
        if (type === "add") {
            const dragTagFormRef: any = this.$refs.dragTagFormRef;
            dragTagFormRef.onAdd(item);
        }
    }
}
</script>
